<template>
  <div class="player-page">
    <div v-show="unfold === false" class="player-container-fold" :style="playerContainerFoldStyle">
      <div class="player-container-fold-before" v-on:click="changePlayerForm">
        <div class="player-container-fold-before-gray"></div>
        <img class="player-container-fold-before-image" v-if="playStatus === true" :src="images.foldImgae[0]"/>
        <img class="player-container-fold-before-image" v-else :src="images.foldImgae[1]" :style="{marginLeft: '10%'}"/>
      </div>
      <img :src="musicImage.src" class="player-container-fold-image" :style="playerContainerFoldImageStyle" />
    </div>
    <div v-show="unfold === true" class="player-container-unfold">
      <div class="player-container-unfold-left" :style="playerContainerUnFoldLeftStyle" v-on:click="changePlayerForm">
        <img :src="musicImage.src" class="player-container-unfold-left-image" :style="playerContainerUnFoldLeftImageStyle" />
      </div>
      <div class="player-container-unfold-right" :style="playerContainerUnFoldRightStyle">
        <img class="player-container-unfold-right-image" :src="images.unfoldImage[0]" v-on:click="openMusicList"/>
        <img class="player-container-unfold-right-image" :src="images.unfoldImage[1]" v-on:click="lastMusic"/>
        <img class="player-container-unfold-right-image" v-if="playStatus === true" :src="images.unfoldImage[2]" v-on:click="changePlayStatus(false)"/>
        <img class="player-container-unfold-right-image" v-else :src="images.unfoldImage[3]" v-on:click="changePlayStatus(true)"/>
        <img class="player-container-unfold-right-image" :src="images.unfoldImage[4]" v-on:click="nextMusic"/>
        <img class="player-container-unfold-right-image" :src="images.unfoldImage[5]" v-on:click="quitApp"/>
      </div>
    </div>
  </div>
</template>

<script>
import defaultMusicImage from '../assets/app.png'
import foldPlayImage from '../assets/fold/play.png'
import foldSuspendImage from '../assets/fold/suspend.png'
import unfoldPlayImage from '../assets/unfold/play.png'
import unfoldSuspendImage from '../assets/unfold/suspend.png'
import unfoldMenuImage from '../assets/unfold/menu.png'
import unfoldNextImage from '../assets/unfold/next.png'
import unfoldLastImage from '../assets/unfold/last.png'
import unfoldUploadImage from '../assets/unfold/upload.png'

export default {
  name: 'Player',
  props: ['musicOnPlay', 'playStatus', 'unfold', 'changePlayStatus', 'changePlayerForm', 'nextMusic', 'lastMusic', 'openMusicList', 'quitApp'],
  data () {
    return {
      musicImage: '',
      images: {
        foldImgae: [foldSuspendImage, foldPlayImage],
        unfoldImage: [unfoldMenuImage, unfoldLastImage, unfoldSuspendImage, unfoldPlayImage, unfoldNextImage, unfoldUploadImage]
      },
      screenProperty: {
        width: '',
        height: ''
      },
      playerContainerFoldStyle: {
        width: '',
        height: '',
        borderRadius: ''
      },
      playerContainerFoldImageStyle: {
        width: '',
        height: ''
      },
      playerContainerUnFoldLeftStyle: {
        width: '',
        height: '',
        borderRadius: ''
      },
      playerContainerUnFoldLeftImageStyle: {
        width: '',
        height: ''
      },
      playerContainerUnFoldRightStyle: {
        width: '',
        height: ''
      }
    }
  },
  mounted () {
    var img = new Image()
    img.src = this.musicOnPlay.music_image_path ? 'http://music.ma-jing.cn' + this.musicOnPlay.music_image_path : defaultMusicImage
    this.musicImage = img

    this.updateAllProperty(img)
    window.onresize = () => {
      this.updateAllProperty(this.musicImage)
    }
  },
  methods: {
    updateAllProperty (img) {
      const clientWidth = document.body.clientWidth - 10
      const clientHeight = document.body.clientHeight - 10
      const imageWidth = img.width || clientWidth
      const imageHeight = img.height || clientHeight

      // screen style
      this.screenProperty = {
        width: clientWidth,
        height: clientHeight
      }

      // fold style
      this.playerContainerFoldStyle = {
        width: Math.min(clientWidth, clientHeight) + 'px',
        height: Math.min(clientWidth, clientHeight) + 'px',
        borderRadius: Math.min(clientWidth, clientHeight) / 2 + 'px'
      }
      if (imageWidth >= imageHeight) {
        this.playerContainerFoldImageStyle = {
          width: 'auto',
          height: Math.min(clientWidth, clientHeight) + 'px'
        }
      } else {
        this.playerContainerFoldImageStyle = {
          width: Math.min(clientWidth, clientHeight) + 'px',
          height: 'auto'
        }
      }

      // unfold style
      if (clientWidth / clientHeight <= 3.0) {
        this.playerContainerUnFoldLeftStyle = {
          width: clientWidth / 3 + 'px',
          height: clientWidth / 3 + 'px',
          borderRadius: clientWidth / 6 + 'px'
        }
        if (imageWidth >= imageHeight) {
          this.playerContainerUnFoldLeftImageStyle = {
            width: 'auto',
            height: clientWidth / 3 + 'px'
          }
        } else {
          this.playerContainerUnFoldLeftImageStyle = {
            width: clientWidth / 3 + 'px',
            height: 'auto'
          }
        }
        this.playerContainerUnFoldRightStyle = {
          width: clientWidth / 3 * 2 + 'px',
          height: clientWidth / 3 + 'px',
          left: clientWidth / 3 + 'px'
        }
      } else {
        this.playerContainerUnFoldLeftStyle = {
          width: clientHeight / 3 + 'px',
          height: clientHeight / 3 + 'px',
          borderRadius: clientHeight / 6 + 'px'
        }
        if (imageWidth >= imageHeight) {
          this.playerContainerUnFoldLeftImageStyle = {
            width: 'auto',
            height: clientHeight / 3 + 'px'
          }
        } else {
          this.playerContainerUnFoldLeftImageStyle = {
            width: clientHeight / 3 + 'px',
            height: 'auto'
          }
        }
        this.playerContainerUnFoldRightStyle = {
          width: clientWidth / 3 * 2 + 'px',
          height: clientWidth / 3 + 'px',
          left: clientHeight / 3 + 'px'
        }
      }
    }
  },
  watch: {
    musicOnPlay (newValue) {
      var img = new Image()
      img.src = newValue.music_image_path ? 'http://music.ma-jing.cn' + newValue.music_image_path : defaultMusicImage
      this.musicImage = img
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped vars="{ playerWidth, playerHeight }">
.player-page {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  user-select: none;
}

/* fold player */
.player-container-fold {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.player-container-fold-image {
  position: absolute;
  z-index: 100;
  width: 0;
  height: 0;
}
.player-container-fold-before {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 101;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.player-container-fold-before-gray {
  position: absolute;
  z-index: 105;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 0.35;
}
.player-container-fold-before-image {
  position: absolute;
  z-index: 102;
  width: 50%;
  height: auto;
}

/* unfold player */
.player-container-unfold {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.player-container-unfold-left {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.player-container-unfold-left-image {
  position: absolute;
  z-index: 100;
  width: 0;
  height: 0;
}
.player-container-unfold-right {
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  padding-left: 2%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
}
.player-container-unfold-right-image {
  width: 20%;
  height: auto;
  box-sizing: border-box;
}

</style>
